<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<table id="buytab" border="1" width="600" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th><input type="checkbox" name="" id="quanxuan" value="" checked="checked" />全选</th>
					<th>商品名称</th>
					<th>单价</th>
					<th>数量</th>
					<th>小计</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tabbody">

			</tbody>
			<tfoot>
				<tr>
					<th><input type="checkbox" name="" id="fanxuan" value="" />反选</th>
					<th><input type="button" value="添加" onclick="addfun()" /></th>
					<th>总价<input type="text"></th>
				</tr>
			</tfoot>
		</table>
		<script type="text/javascript">
			//全选
			document.getElementById("quanxuan").onclick = function() {
				var inputs = document.getElementById("tabbody").getElementsByTagName("input")
				for(var i = 0; i < inputs.length; i++) {
					if(inputs[i].type == "checkbox") {
						inputs[i].checked = this.checked;
					}
				}
			}
			//反选
			document.getElementById("fanxuan").onclick = function() {
				var inputs = document.getElementById("tabbody").getElementsByTagName("input");
				for(var i = 0; i < inputs.length; i++) {
					if(inputs[i].type == "checkbox") {
						inputs[i].checked = !inputs[i].checked;

					}
				}
				selectcheckbox();

			}

			function selectcheckbox() {
				var isquanxuan = true;
				var inputs = document.getElementById("tabbody").getElementsByTagName("input");
				for(var i = 0; i < inputs.length; i++) {
					if(inputs[i].type == "checkbox" && inputs[i].checked == false) {
						isquanxuan = false;
						break;
					}
				}
				document.getElementById("quanxuan").checked = isquanxuan;
			}

			/**
			 * 添加产品
			 */
			function addfun() {
				var tbody = document.getElementById("buytab").children[1];
				//创建TR
				//创建6个TD
				var tr = document.createElement("tr");
				var td1 = document.createElement("td");
				var chbox = document.createElement("input");
				chbox.type = "checkbox";
				td1.appendChild(chbox);
				var td2 = document.createElement("td");
				td2.innerHTML = "产品名称" + tbody.children.length;
				var td3 = document.createElement("td");
				td3.innerHTML = parseInt(Math.random() * 10000) + 1;
				var td4 = document.createElement("td");
				td4.innerHTML = "<input type='button'value='-'><input type='texe' value='1'size='1'/><input type='button'value='+'>";
				td4.getElementsByTagName("input")[0].onclick = function() {
					if(td4.getElementsByTagName("input")[1].value > 0) {
						td4.getElementsByTagName("input")[1].value--;
						td5.innerHTML = td3.innerHTML * td4.getElementsByTagName("input")[1].value;
					}
				}
				td4.getElementsByTagName("input")[2].onclick = function() {
					td4.getElementsByTagName("input")[1].value++;
					td5.innerHTML = td3.innerHTML * td4.getElementsByTagName("input")[1].value;
				}

				var td5 = document.createElement("td");
				td5.innerHTML = td3.innerHTML;
				var td6 = document.createElement("td");
				td6.innerHTML = "<input type='button'value='X'onclick='deltr(this)' />"
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tr.appendChild(td5);
				tr.appendChild(td6);
				tbody.appendChild(tr)
			}

			function deltr(t) {
				var tbody = document.getElementById("buytab").children[1];
				tbody.removeChild(t.parentNode.parentNode)
			}
		</script>
	</body>

</html>